import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import fetch from 'API/fetch';
import RaskSelect from '../../../components/RaskSelect';
import { Spin } from 'antd';
import Label from '../../../components/Label';
import { datetime } from '../../../../common/formatter';
import s from './Content.module.css';
import Trend from './Trend';
import CategoryPie from './CategoryPie';
import CategoryTable from './CategoryTable';
import DetailTable from './DetailTable';

export default function ChangeCheck({ className, jobId }) {
  const [endtime, setendtime] = React.useState('');
  const [detailTaskId, setdetailTaskId] = React.useState('');
  const [statsList, setStatsList] = React.useState([]);
  const [allData, setAllData] = React.useState([]);
  const [dateRask, setDateRask] = React.useState({ detectTime: 'last', detectType: 'last' });
  const [loading, setLoading] = React.useState(false);

  const getdata = async ({
    Type = 'changeCheck',
    range = 'range',
    startTime,
    endTime,
  }) => {
    if (!jobId) return false
    setLoading(true);
    let url = `/api/v2/repodatas/report-task?jobId=${jobId}&taskType=${Type}&range=${range}`;
    if (range === 'range') {
      url += `&startTime=${new Date(startTime).toISOString()}
			&endTime=${new Date(endTime).toISOString()}`;
    }
    const res = await fetch(url, {
      method: 'GET',
    }).catch(err => {
      console.log(err);
    }).finally(() => {
      setLoading(false);
    });

    const statsList = res.TaskData || [];
    const endtime = statsList?.[0]?.endTime;
    const detailTaskId = statsList.find(x => x?.result?.stats?.url > 0)?._id;
    setAllData(statsList);
    if (range === 'range') {
      setStatsList(statsList);
    } else {
      setStatsList([statsList[0]]);
    }
    setdetailTaskId(detailTaskId);
    setendtime(endtime);
    setLoading(false);
  };
  const handleDateRask = val => {
    setDateRask(val);
    const obj = {
      range: val.detectTime || 'range',
    };
    if (val.detectTime === 'prev') {
      setStatsList([allData[1]]);
      return false;
    }
    if (obj.range === 'range') {
      obj.startTime = val.dateRange[0];
      obj.endTime = val.dateRange[1];
    }
    if (val.dateRange.length !== 2) {
      obj.range = 'last';
    }
    getdata(obj);
  };
  React.useMemo(() => {
    getdata({ range: 'last' });
  }, []);

  return (
    <Spin spinning={loading}>
      <div className={cn(className, s.content, 'scanv-page-container')}>
        <div className={s.head}>
          <div className={s.title}>
            <Label className={s.label}>篡改</Label>
            {dateRask?.detectTime && (
              <span className={s.date}>{datetime(endtime)}</span>
            )}
          </div>

          <RaskSelect
            value={dateRask}
            onChange={handleDateRask}
            resultLength={statsList.length || 0}
          />
        </div>

        <Trend
          className={s.trend}
          dateRask={dateRask}
          stats={allData}
        />

        <section className={s.row}>
          <CategoryPie
            className={cn(s.categoryPie, s.flex2)}
            stats={statsList}
          />
          <CategoryTable
            className={cn(s.categoryPie, s.flex3)}
            stats={statsList}
          />
        </section>


        <DetailTable
          key={detailTaskId}
          taskId={detailTaskId}
          stats={statsList}
        />
      </div>
    </Spin>
  );
}

ChangeCheck.propTypes = {
  className: PropTypes.string,
  jobId: PropTypes.string,
  lastId: PropTypes.string,
  prevId: PropTypes.string,
};

ChangeCheck.defaultProps = {
  className: s.content,
  jobId: '',
  lastId: '',
  prevId: '',
};
